<template>
  <div :style="{width:width+'px'}" class="uploadimg-container">
    <el-upload
      :style="styleObj"
      :action="action"
      :show-file-list="false"
      :headers="headers"
      :http-request="uploadFile"
      class="uploader-component"
    >
      <img v-if="(type||imageUrl)&&viewUrl" :style="styleObj" :src="viewUrl || imageUrl" class="avatar">
      <i v-else :style="styleObj" class="el-icon-plus avatar-uploader-icon"/>
    </el-upload>
    <div class="tip">宽/高:{{ `${width}*${height}` }}</div>
  </div>
</template>

<script>
import { getUserInfro } from '@/utils/auth'
import axios from 'axios'

export default {
  // props: ['width', 'height', 'resPath', 'type', 'viewUrl', 'idx'],
  data() {
    return {
      imageUrl: '',
      headers: '',
      param: { resPath: this.resPath },
      styleObj: {
        width: this.width + 'px',
        height: this.height + 'px',
        lineHeight: this.height + 'px'
      },
      action: ''
    }
  },
  mounted() {},
  updated() {},
  created() {
    this.initUploadFileurl()
  },
  methods: {
    initUploadFileurl() {
      const token = JSON.parse(getUserInfro()).token
      console.log(token)
      this.action = process.env.BASE_API + 'file/uploadImageAndCrtThumbImages'
      this.headers = {
        'Authorization': token,
        'Content-Type': 'multipart/form-data'
      }
    },
    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      fd.append('resPath', this.resPath)

      // 限制图片上传比例
      if (this.imageType === 'banner') {
        console.log(this.imageType)
        fd.append('imageType', this.imageType)
      }

      const fileSize = fd.size / 1024 / 1024
      if (fileSize > 2) {
        this.$message({
          message: '上传图片不能大于2M',
          type: 'warning'
        })
      } else {
        axios.post(content.action, fd,
          { headers: this.headers }).then(res => {
          if (res.data.code === 1) {
            this.imageUrl = res.data.data
            if (this.idx === undefined) {
              this.$emit('emitSuccess', res.data.data)
            } else {
              const param = {
                url: res.data.data,
                idx: this.idx
              }
              this.$emit('emitSuccess', param)
            }
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            console.log(res.data.data)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
      }
    },
    clearImg() {
      this.imageUrl = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadimg-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  .uploader-component {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    transition: all 0.3s;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      transition: all 0.3s;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    &:hover {
      border-color: #409eff;
      .avatar-uploader-icon {
        font-size: 28px;
        color: #409eff;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      & + .tip {
        left: 10px;
        opacity: 1;
      }
    }
  }
  .tip {
    position: absolute;
    left: -140px;
    opacity: 0;
    top: 0;
    width: 131px;
    color: #fff;
    text-shadow: 2px 2px 2px rgba($color: #000000, $alpha: 1);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      left: 10px;
      opacity: 1;
    }
  }
}
</style>

